<template>
    <div class="home-page">
        <site-header></site-header>
        <site-menus ref="menus"></site-menus>
        <div class="content">
            <div class="first">首页->组织机构->
                <span v-if="rightShow==1">领导小组</span>
                <span v-if="rightShow==2">监督小组</span>
            </div>
            <div class="line"></div>
            <Row>
                <Col span="6">
                    <left-button :list="buttonList" @result="resultAction"></left-button>
                </Col>
                <Col span="18">
                    <group-content :isShow="rightShow==1"></group-content>
                    <group-content2 :isShow="rightShow==2"></group-content2>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>

import SiteMenus from '../home/compoments/site-menus/index'
import SiteHeader from '../home/compoments/site-header/index'
import LeftButton from '../complaints-report/components/left-button/index'
import GroupContent from './compontents/group-content/index'
import GroupContent2 from './compontents/group-content2/index'

export default {
  components: { GroupContent2, GroupContent, LeftButton, SiteHeader, SiteMenus },
  data () {
    return {
      rightShow: '1',
      buttonList: [
        {
          content: '领导小组',
          id: '1'
        },
        {
          content: '监督组',
          id: '2'
        },
        {
          content: '监督员',
          path: '/group-personnel'
        }
      ]
    }
  },
  methods: {
    resultAction (id) {
      this.rightShow = id
    }
  },
  mounted () {
    this.$refs.menus.changeColor = this.$route.query.index
  }
}
</script>

<style scoped lang="less">
    .home-page {
        height: 100%;
        overflow: scroll;
    }

    .content {
        height: 1000px;
        width: 94%;
        margin-left: 3%;
    }

    .first {
        font-size: 20px;
        color: black;
        font-weight: bolder;
        margin-left: 40px;
        height: 60px;
        line-height: 60px;
    }

    .line {
        height: 5px;
        background-color: #0166b6;
    }

    .acceptance {
        font-weight: bolder;
        margin-left: 20px;
        margin-top: 10px;
        height: 70px;
        width: 300px;
        background-color: #0166b6;
        color: white;
        font-size: 20px;
        line-height: 70px;
        text-align: center;
    }

    .mode {
        font-weight: bolder;
        margin-left: 20px;
        margin-top: 20px;
        height: 70px;
        width: 300px;
        border: 3px #0166b6 solid;
        font-size: 20px;
        color: #0166b6;
        line-height: 70px;
        text-align: center;
    }

    .gray {
        height: 50px;
        background-color: #EEECED;
        line-height: 50px;
        font-size: 20px;
        color: #0166b6;
    }
</style>
